<template>
  <div class="container">
    <a-form style="margin-bottom: 10px" auto-label-width>
      <a-row :gutter="20">
        <a-col :span="14">
          <a-form-item label="页面名称">
            <a-input allow-clear v-model="state.sd.pageName" placeholder="页面名称" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-button type="primary" @click="searchPage">
            <template #icon><icon-search /></template>查询
          </a-button>
        </a-col>
      </a-row>
    </a-form>

    <a-row :gutter="12">
      <a-col :span="3" v-for="(page,index) in state.pageObj" :key="page.id">
        <a-card>
          <div>
            <a-image width="100%" height="150px" :src="pageImageUrl" fit="fill" />
          </div>
          <h4 style="padding-left: 6px">
            {{page.pagename}}
          </h4>
          <div>
            <a-space>
              <a-button size="small" type="primary" @click="pageRoleList(page.id)">页面角色</a-button>
              <a-button size="small" type="primary" @click="pageUserList(page.id)">用户授权</a-button>
            </a-space>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <a-modal :title="state.popupTitle" v-model:visible="state.pageUserListVisible" :footer="false" width="880px">
      <PageUser v-if="state.pageUserListVisible" v-model="state.pageUserListVisible" :pageId="state.popupEntityId"></PageUser>
    </a-modal>
    <a-modal :title="state.popupTitle" v-model:visible="state.pageRoleListVisible" :footer="false">
      <PageRole v-if="state.pageRoleListVisible" v-model="state.pageRoleListVisible" :pageId="state.popupEntityId"></PageRole>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import { Message } from '@arco-design/web-vue'
import {reactive, onMounted, defineAsyncComponent} from "vue";
// 引入组件
const PageRole = defineAsyncComponent(() => import('@/views/pageadmin/pageRole.vue'));
const PageUser = defineAsyncComponent(() => import('@/views/pageadmin/pageUser.vue'));

const pageImageUrl = 'https://img2.baidu.com/it/u=1126689368,2313036616&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=370';
const state = reactive({
  sd: {
    pageName : '',
  },
  pageObj: {},

  pageUserListVisible : false,
  popupTitle : '',
  popupEntityId : 0,
  pageRoleListVisible: false
})

const searchPage = ()=>{
  loadPage();
}
const loadPage = ()=>{
  axios.post( '/pageadmin/listpage', state.sd).then(res => {
    const { data } = res
    state.pageObj = data
  })
}
const pageRoleList = (id)=>{
  state.popupEntityId = id;
  state.popupTitle= "页面角色查看"
  state.pageRoleListVisible= true
}
const pageUserList = (id)=>{
  state.popupEntityId = id;
  state.popupTitle= "用户授权"
  state.pageUserListVisible= true
}
onMounted(()=>{
  loadPage();
})
</script>
<style scoped>
</style>
